<template>
  <el-drawer-comp headTitle="普通表单设计器" size="90%" :hasFooter="true" ref="refDrawer"
  @throwSumitEmit="saveFormJson"  v-loading="loading"
                  :element-loading-text="loadingTitle">
    <v-form-designer ref="vfDesigner" :designer-config="designerConfig"></v-form-designer>
  </el-drawer-comp>

</template>

<script>
import {getJSONForm, addJSONForm, editJSONForm} from '@/api/public/index'
let onlineTableId = ''
let formId = ''
export default {
  name: "ScrameForm",
  data(){
    return {
      designerConfig: {
        generateSFCButton: false,
        exportCodeButton: true,  //是否显示导出代码按钮
        toolbarMaxWidth: 350,
        toolbarMinWidth: 350,  //设计器工具按钮栏最小宽度（单位像素）
        formHeader: false,
      },
      loading:false,
      loadingTitle:'表单初始化中'
    }
  },
  methods:{
    openFormDrawer(row){
      this.loadingTitle = '表单初始化中'
      this.loading = true
      onlineTableId = row.id
      getJSONForm({onlineTableId:row.id}).then(res =>{
        if(res.code == 200){
          this.$refs.refDrawer.openDrawer()
          if(!res.data.records.length){
            this.$nextTick(()=>{
              this.$refs.vfDesigner.setFormJson({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
            })
          }
          else{
            this.$nextTick(()=>{
              formId = res.data.records[0].id
              this.$refs.vfDesigner.setFormJson(JSON.parse(res.data.records[0].widgetJson))
            })
          }
          this.loading = false
        }
        else{
          this.loading = false
        }
      }).catch(()=>{
        this.loading = false
      })

    },
    saveFormJson(){
      let isSyncFlow = 0
      this.$confirm('是否为存储为流程表单！', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        isSyncFlow = 1
        this.orignForm(isSyncFlow)
      }).catch(()=>{
        isSyncFlow = 0
        this.orignForm(isSyncFlow)
      })


    },
    orignForm(isSyncFlow){
      this.loadingTitle = '表单存储中'
      this.loading = true
      let formJson = this.$refs.vfDesigner.getFormJson()
      if(formId){
        const data = {
          id:formId,
          isSyncFlow,
          onlineTableId,
          widgetJson:JSON.stringify(formJson)
        }
        editJSONForm(data).then(res => {
          if(res.code == 200){
            this.$message.success('编辑成功')
            this.$refs.refDrawer.closeDrawer()
            this.loading = false
          }
          else{
            this.loading = false
          }
        }).catch(()=>{
          this.loading = false
        })
      }
      else{
        const data = {
          id:formId,
          onlineTableId,
          isSyncFlow,
          widgetJson:JSON.stringify(formJson)
        }
        addJSONForm(data).then(res => {
          if(res.code == 200){
            this.$message.success('保存成功')
            this.$refs.refDrawer.closeDrawer()
            this.loading = false
          }
          else{
            this.loading = false
          }
        }).catch(()=>{
          this.loading = false
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
.el-container.main-container{
  background: #fff;
  margin-left: 0 !important;
}
</style>
